<template>
  <div class="form">
    <el-form :label-position="labelPosition" label-width="100px">
      <el-form-item lable="图片">
        <el-image
          style="width: 200px; height: 200px"
          :src="image"
          @click="preview">
        </el-image>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="描述" style="user-select: none">
        <el-input v-model="formLabelAlign.description"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}">
        </el-input>
      </el-form-item>
      <el-form-item label="联系方式" style="user-select: none">
        <el-input v-model="formLabelAlign.contactInfo"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}">
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "preview",
  data() {
    return {
      labelPosition: "left",
      formLabelAlign: {},
      dialogVisible:false,
      image: '',
      dialogImageUrl: ''
    }
  },
  methods: {
    preview() {
      this.dialogImageUrl = this.image;
      this.dialogVisible = true;
    }
  },
  async mounted() {
    const res = await request.get("/api/message/getByMessageId/" + this.$route.query.id);
    console.log(res);
    this.image = res.data.data.pic;
    this.formLabelAlign.description = res.data.data.description;
    this.formLabelAlign.contactInfo = res.data.data.contactInfo;
  }
}
</script>

<style scoped>
.form {
  border-radius: 15px; /*圆角*/
  background-clip: padding-box; /*背景被裁剪到内边距框*/
  margin: 50px auto; /*边界 距上180px 左右居中*/
  width: 700px; /*表单宽度*/
  padding: 35px 35px 15px 35px; /*填充*/
  background: #cac6c6;
  border: 1px solid #eaeaea; /*边框*/
  box-shadow: 0 0 25px #cac6c6; /*隐形*/
}
</style>
